<template>
  <div class="lifecycle">
    <div>当前求和为：{{ sum }}</div>
    <button @click="sumAdd">click sum add 1</button>
  </div>
</template>

<script lang="ts" setup name="Lifecycle">
import {
  onBeforeMount,
  onBeforeUnmount,
  onBeforeUpdate,
  onMounted,
  onUnmounted,
  onUpdated,
  ref,
} from "vue";

let sum = ref(0);
function sumAdd() {
  sum.value += 1;
}
console.log("子创建");
onBeforeMount(() => {
  console.log("子挂载前");
});
onMounted(() => {
  console.log("子挂载完毕");
});
onBeforeUpdate(() => {
  console.log("子更新前");
});
onUpdated(() => {
  console.log("子更新完毕");
});
onBeforeUnmount(() => {
  console.log("子卸载前");
});
onUnmounted(() => {
  console.log("子卸载完毕");
});
</script>

<style scoped>
.lifecycle {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>